<template>
	<div class="education">
		<div class="add-btn" v-if="editState == 0" @click="editState = 1"><img src="@/assets/me/up.png"><span>添加</span></div>
		<div class="title">教育经历</div>
		<div class="education-content" v-if="editState == 0 && form.educationInfos.length>0">
			<div class="education-item flex" v-for="(items,index) in form.educationInfos" :key="index">
				<div class="label">{{parseTime(new Date(items.startTime),'{y}-{m}')}} 至 {{parseTime(new Date(items.endTime),'{y}-{m}')}}</div>
				<div class="line">
					<div class="dian"></div>
					<div class="line-box"></div>
				</div>
				<div class="item-val">{{items.education}} | {{items.schoolName}} | {{items.majorName}}</div>
				<div class="all-option transition-ease-in">
					<span class="all-option-edit" @click="editEducation(index)">编辑</span>
					<span class="all-option-del" @click="delEducation(index)">删除</span>
				</div>
			</div>
		</div>
		<div class="education-content no-data" v-if="editState == 0 && form.educationInfos.length==0">
			教育经历最能体现您的学历和专业能力，快来完成它吸引企业和HR青睐吧！
		</div>
		<div class="education-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="editForm" :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-left flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="学校名称：" class="flex-item" prop="schoolName">
								<el-input v-model="editForm.schoolName" placeholder="请输入学校名称"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="最高学历：" class="flex-item" prop="education">
								<el-select v-model="editForm.education" placeholder="请选择" class="select-input">
									<el-option  v-for="(items,index) in educationSelect" :key="index" :label="items.name" :value="items.name"></el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="edit-right flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="专业名称：" class="flex-item" prop="majorName">
								<el-input v-model="editForm.majorName" placeholder="请输入专业名称"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="就读时间：" prop="studyTime">
								<el-date-picker
									v-model ="editForm.educationTime"
									type="monthrange"
									value-format="yyyy-MM"
									range-separator="至"
									start-placeholder="开始年月"
									end-placeholder="结束年月" @change="formatDateRang">
								</el-date-picker>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="cancelEdit">取消</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {updateResumeEducation} from '@/api/me/resume'
import {findBaseData} from '@/api/base'
	export default {
		name:'education',
		props:['resumeEducations'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				educationIndex:0,
				form:{
					educationInfos: [],
					resumeId: this.$route.query.id,
				},
				rules: {
					schoolName: [{ required: true, trigger: "blur", message: "请输入学校名称" }],
					education: [{ required: true, trigger: "blur", message: "请选择最高学历" }],
					majorName: [{ required: true, trigger: "blur", message: "请输入专业名称" }],
					startTime: [{ required: true, trigger: "blur", message: "请选择就读时间" }]
				},
				editForm:{
					resumeId: this.$route.query.id,
					schoolName:'',
					educationId: 0,
					education:'',
					majorName:'',
					startTime:'',
					endTime:'',
					soFar: '',
					status: 1,
					educationTime:['','']
				},
				educationSelect:[
					{name : "初中", id : 32},
					{name : "高中", id : 33},
					{name : "中技", id : 34},
					{name : "中专", id : 35},
					{name : "大专", id : 36},
					{name : "本科", id : 37},
					{name : "硕士", id : 38},
					{name : "博士", id : 39},
					{name : "博后", id : 40}
				],
				optionType:1
			}
		},
		watch:{
			resumeEducations(val){
				this.form.educationInfos=val;
				this.form.resumeId=this.$route.query.id;
			}
		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						updateResumeEducation(this.editForm).then(res => {
							if(res.resp_code == 0){
								this.$message.success('操作成功');
							}
							this.editState=0;

							if(this.editForm.index != undefined || this.editForm.index != null){
								this.form.educationInfos[this.editForm.index] = this.editForm;
							}else{
								this.editForm.id = res.datas.id;
								this.form.educationInfos.push(this.editForm);
							}
							this.editForm = {
								resumeId: this.$route.query.id,
								schoolName:'',
								educationId: 0,
								education:'',
								majorName:'',
								startTime:'',
								endTime:'',
								soFar: '',
								status: 1,
								id: 0,
								educationTime:['','']
							}
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			},
			editEducation(index){
				this.editForm = {
					schoolName: this.form.educationInfos[index].schoolName,
					educationId: this.form.educationInfos[index].id,
					education: this.form.educationInfos[index].education,
					majorName: this.form.educationInfos[index].majorName,
					startTime:this.form.educationInfos[index].startTime,
					endTime:this.form.educationInfos[index].endTime,
					educationTime:[this.form.educationInfos[index].startTime,this.form.educationInfos[index].endTime],
					resumeId: this.$route.query.id,
					status: 1,
					index: index
				}

				this.optionType=2;
				this.editState=1;
			},

			formatDateRang(val){
				// this.editForm.startTime=this.parseTime(val[0],'{y}-{m}')
				// this.editForm.endTime=this.parseTime(val[1],'{y}-{m}')
				this.editForm.startTime= val[0]
				this.editForm.endTime= val[1]
				this.$set(this.editForm,'educationTime',val);
			},
			delEducation(index){

				this.editForm.educationId = this.form.educationInfos[index].id;
				this.editForm.status = 0;

				// this.optionType=3;
				updateResumeEducation(this.editForm).then(res => {
					this.$message.success('删除成功');
					this.form.educationInfos.splice(index,1);
				}).catch(err => {
					this.$message.error(err);
				})
			},
			addEducation(){
				this.optionType == 1;
				var arr={
					schoolName:'',
					education:'',
					majorName:'',
					startTime:'',
					endTime:'',
					id: 0,
					educationTime:['','']
				}
				this.form.educationInfos.push(arr);
				this.educationIndex=this.form.educationInfos.length-1;
				this.editForm=arr;
				this.optionType = 1;
				this.editState = 1;
			},
			cancelEdit(){
				if(this.optionType == 1){
					this.form.educationInfos.splice(this.educationIndex,1);
				}
				this.editState = 0
			}
		}
	}
</script>
<style lang="scss">
	.education{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.add-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.education-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.education-content{
			margin-top: 25px;
			color: #787878;
			.education-item{
				min-height: 30px;
				line-height: 30px;
				.all-option{
					margin-left: 20px;
					opacity: 0;
					pointer-events: none;
					span{
						color: #3EABC4;
						margin-left: 10px;
						cursor: pointer;
					}
				}
				.label{
					padding-right: 20px;
					width: 156px;
					text-align: right;
				}
				.line{
					width: 7px;
					position: relative;
					.dian{
						width: 7px;
						height: 7px;
						background: #D0D0D0;
						border-radius: 50%;
						position: absolute;
						top: 11px;
						left: 0;
					}
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 100%;
						width: 1px;
						margin-left: 3px;
					}
				}
				.item-val{
					padding-left: 20px;
				}
			}
			.education-item:hover{
				.all-option{
					opacity: 1;
					pointer-events:painted;
				}
			}
			.education-item:first-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 50%;
						width: 1px;
						margin-left: 3px;
						position: absolute;
						top: 50%;
					}
				}
			}
			.education-item:last-child{
				.line{
					.line-box{
						border-right: 1px solid #D0D0D0;
						height: 50%;
						width: 1px;
						margin-left: 3px;
					}
				}
			}
		}
		.education-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-left{
					padding-right: 80px;

				}
				.edit-right{
					padding-right: 40px;

				}
				.edit-item{

					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}

					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}

				}
			}
		}
	}
</style>
